<template>
	<view class="wrapper">
		<view class="top">
			<view class="top_content" v-for="(item,index) in top" :key="index">
				<view class="top_name">{{item.name}}</view>
				<u-input :placeholder="item.placeholderStyle" :border="false" v-model="item.modle">
				</u-input>
			</view>
			<!-- 所在地区 -->
			<!-- 	<view class="top_content" @click="region()">
				<text>所在地区</text>
				<u-input :value="address" :border="false" placeholder="省市区县、乡镇等"></u-input>
			</view> -->
			<!-- 详细地址 -->
			<view class="top_content">
				<text>详细地址</text>
				<u-input v-model="Detail" :border="false" active-color="#3AA3FF" placeholder="街道、楼牌号等"></u-input>
			</view>
		</view>
		<!-- 默认地址 -->
		<view class="defaultAddress">
			<text>设置为默认地址</text>
			<u-switch v-model="checked" @change="Setaddress()" size="50" :value="false"
				active-color="#3AA3FF"></u-switch>
		</view>

		<!-- 保存 -->
		<view class="save" @click="TheAddress()">保存</view>
		<!-- 地区选择器 -->
		<itmister-address-picker ref="addressEl" @confirmChange="confirmChange()"></itmister-address-picker>
	</view>
</template>

<script>
	import itmisterAddressPicker from '../../components/itmister-address-picker/itmister-address-picker.nvue'
	import {
		addressAdd,
		addressEdit,
		addressInfo
	} from '@/api/url.js'
	export default {
		data() {
			return {
				checked: false,
				show: true,
				Detail: '', //详细地址
				top: [{
						name: '收货人',
						placeholderStyle: '请输入收货人姓名',
						modle: ''
					},
					{
						name: '手机号码',
						placeholderStyle: '填写收件人手机号码',
						modle: ''
					}
				],
				address: '', //所在地区
				province: '', //省
				city: '', //市
				area: '', //区
				defaultAddress: false, //是否是默认地址
				id: 0,
				token: uni.getStorageSync('token'),
				id: 0
			}
		},
		components: {
			itmisterAddressPicker
		},
		onLoad(options) {
			console.log(options, 'options');
			if (options.id) {
				this.id = options.id
				addressInfo({
					id: options.id
				}, this.token).then(res => {
					console.log(res, '地址详情');
					this.top[0].modle = res.data.data.consigneeName
					this.top[1].modle = res.data.data.consigneePhone
					this.Detail = res.data.data.address
					this.checked = res.data.data.isDefault == 1 ? true : false
				});
			}

		},
		methods: {
			async Setaddress(e) { //设置默认地址
				console.log('e', e);
				if (e) {
					this.checked = e;
				}
			},
			region() { //所在地区
				this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address) {
				this.address = address.province + '/' + address.city + '/' + address.area;
				this.province = address.province; //省
				this.city = address.city; //市
				this.area = address.area; //区
				console.log('this.dasdsad', this.city);
			},

			async TheAddress() { //新增地址
				let reg = /^1[3456789][0-9]{9}$/; //判断手机号
				if (!reg.test(this.top[1].modle)) {
					uni.showToast({
						title: '手机号码输入有误',
						icon: 'none',
						duration: 2000
					})
				} else if (!this.province && this.city && this.area) {
					uni.showToast({
						title: '所在地区有误',
						icon: 'none',
						duration: 2000
					})
				} else if (!this.Detail) {
					uni.showToast({
						title: '详细地址有误',
						icon: 'none',
						duration: 2000
					})
				} else {
					if (this.id > 0) {
						// 编辑
						let data = {
							"province_name": this.province, //省
							"city_name": this.city, //市
							"region_name": this.area, //区
							"address": this.Detail,
							"consigneeName": this.top[0].modle, //用户名
							"consigneePhone": this.top[1].modle, //手机号
							"isDefault": this.checked == true ? 1 : 0, //是否默认值（1是默认 0不是默认）
							"id": this.id //新增就传空，修改传id
						}
						addressEdit(data, this.token).then(res => {
							console.log(res, '微信一键登录返回的数据');
							if (res.data.code == 200) {
								console.log(res, '确认');
								uni.showToast({
									title: res.data.msg,
									icon: 'success',
									success: function(res) {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 600)
									}
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
							}
						});
					} else {
						//新怎
						let data = {
							"province_name": this.province, //省
							"city_name": this.city, //市
							"region_name": this.area, //区
							"address": this.Detail,
							"consigneeName": this.top[0].modle, //用户名
							"consigneePhone": this.top[1].modle, //手机号
							"isDefault": this.checked == true ? 1 : 0, //是否默认值（1是默认 0不是默认）
							"id": this.id //新增就传空，修改传id
						}
						addressAdd(data, this.token).then(res => {
							console.log(res, '微信一键登录返回的数据');
							if (res.data.code == 200) {
								console.log(res, '确认');
								uni.showToast({
									title: res.data.msg,
									icon: 'success',
									success: function(res) {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 600)
									}
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								})
							}
						});
					}


				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 100vh;
		background-color: #F8F8F8;

		.top {
			width: 100%;
			// height: 620rpx;
			background-color: #fff;
			padding: 32rpx;
			box-sizing: border-box;

			.top_content {
				height: 141rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 4rpx solid #F6F6F6;

				.top_name {
					width: 128rpx;
				}
			}
		}

		.top>view:nth-of-type(4) {
			border: 0rpx;
		}

		// 设置默认地址
		.defaultAddress {
			width: 100%;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
		}

		// 保存按钮
		.save {
			width: 590rpx;
			height: 82rpx;
			background: linear-gradient(90deg, #3AA3FF, #005DFF);
			box-shadow: 0px 3px 10px rgba(69, 201, 166, 0.1600);
			opacity: 1;
			border-radius: 49px;
			position: fixed;
			bottom: 72rpx;
			text-align: center;
			color: #fff;
			line-height: 82rpx;
			margin-left: 81rpx;
		}
	}
</style>